<template>
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <div class="wrap">
    <!-- <header-top title="立项审批管理"/> -->
    <div class="content">
      <div class="banner">
        <img src="@/components/images/jianggan-banner.png" />
      </div>
      <div class="wrapper">
        <div class="top">
          <div class="t-header" @click="handlePopup()">
            <img src="@/components/images/avatar.png" />
          </div>
          <div class="t-tabs">
            <div v-for="(it, i) in tabList" :key="'tab' + i" class="tab">
              <span class="text" :class="{'act': tabActed == i}" @click="handle_type(i)">{{it.label}}</span>
            </div>
          </div>
          <div class="s-search">
             <van-icon name="search" size="20" color="#b2b2b2" />
             <span class="text" @click="goSearch">搜索</span>
          </div>
        </div>
       
        <div class="project-list">
            <div v-if="list.length">
              <div v-for="(approveData, i) in list" :key="'id' + i" class="approve-card-container" @click="goDetail(approveData)">
                <div class="title">[{{approveData.no}}]{{approveData.title}}</div>
                <div class="name-wrap label-text">
                  <span class="label">招标单位：</span>
                  <span class="name">{{approveData.zbdw}}</span>
                </div>
                <div class="status-wrap label-text">
                  <span class="label">审批状态：</span>
                  <span class="status" 
                    :class="['status-' + approveData.status]">
                    {{statusName[approveData.status - 1]}}</span>
                </div>
                <div class="create-time">创建时间:{{approveData.create_time | createTime }}</div>
              </div>
            </div>
            <div class="empty">
              <p class="text">历史数据请通过搜索页<span class="link" @click="goSearch">查看</span><van-icon name="search" size="20" color="#b2b2b2" /></p>
            </div>
        </div>
        <van-popup v-model="show" get-container="#app" position="left" :style="{ width: '55%', height: '100%' }" >
          <div class="user">
            <div>
              <img class="pic" src="../assets/tabbar/avatar.png">
              <p class="name">{{user.showname}}</p>
            </div>
            <van-button class="btn" type="info" @click="LoginOut">退出登录</van-button>
          </div>
          
        </van-popup>
      </div>
      </div>
    </div>
  </van-pull-refresh>
</template>
<script>
  import { Dialog, Toast} from 'vant';
  // import headerTop from '../components/HeaderTop'
  import { checkLogin, getFlowList } from "../api";
  export default {
    data() {
      return {
        activeName: 'all',
        tabList: [
          {
            label: '全部',
            type: 'all'
          }, 
          {
            label: '代办事项',
            type: 'todo'
          }
        ],
        tabActed: 0,
        list: [],
        list1: [],
        list2: [],
        user: {},
        count: 0,
        isLoading: false,
        statusName: [ '待提交', '审批中', '审批未通过', '审批通过' ],
        show: false,
      }
    },
    mounted() {
      // localStorage.setItem('fontSize', document.querySelector('html').style.fontSize)

      if (!document.querySelector('html').style.fontSize) {
        document.getElementsByTagName('html')[0].style.fontSize = '39px'
      }
      this.init()
    },
    methods:{
      init() {
        const token = localStorage.getItem('zzdToken')
        const that = this
        checkLogin(token).then(res => {
          console.log('checkLogin:', res)
          if (res && res.data.code === 1) {
             this.user = res.data.user
             localStorage.setItem('zzdToken', res.data.user.zzdToken)
             localStorage.setItem('userInfo', JSON.stringify(res.data.user))
             setTimeout(()=> {
              that.getList(0)
              that.getList(1)
             }, 10)
             
				} else if (res && (res.data.msg === 'check_fail_param_zzdToken' || res.data.msg === 'sso_check_fail_user')) {
            Dialog.alert({
              title: '未登录',
              message: '您未登录，需要登录后才能继续',
            }).then(() => {
              // on close
              localStorage.removeItem('SYS_NAME')
              this.$router.push({path: '/login'})
            });
					} else {
            this.$router.push({path: '/login'})
          }
				}) 
      },
      handle_type(index) {
        this.tabActed = index
        if(this.tabActed === 0) {
          this.list = this.list0
        } else {
          this.list = this.list1
        }
      },
      handlePopup() {
        this.show = true
      },
      LoginOut() {
        Dialog.confirm({
          title: '退出',
          message: '是否确认退出登录',
        }).then(() => {
            // on confirm
            localStorage.removeItem('zzdToken')
            this.$router.push({path: '/login'})
          })
          .catch(() => {
            // on cancel
          });
        
      },
      onRefresh() {
        this.getList(0)
        this.getList(1)
        setTimeout(() => {
          Toast('刷新成功');
          this.isLoading = false;
        }, 1000);
      },
      getList(type) {
        const params = {
            type: type === 0 ? 2 : 1, // 1 待办 2 全部
            pageSize:999,
            pageNum: 1
        }
        const token = localStorage.getItem('zzdToken')
        getFlowList(params, token).then(res => {
          if (res.data.code === 1) {
            if(+type === 0) {
              this.list0 = res.data.dataList
            }
            if(+type === 1) {
              this.list1 = res.data.dataList
            }
            if(this.tabActed === 0) {
              this.list = this.list0
            } else {
              this.list = this.list1
            }
          }
        })
      },
      goDetail(it) {
        this.$router.push({ path: '/detail', query: {id: it.id, tablename: it.tableName}})
      },
      goSearch() {
        this.$router.push({ path: '/search'})
      },
    },
    filters:{
      createTime(val) {
        // var date = new Date(val).toJSON();
        // var d = date.replace(/T/g,' ').replace(/\.[\d]{3}Z/,'');
        var date = new Date(val),
            Y = date.getFullYear() + '-',
            M = (date.getMonth()+1 < 10 ? '0' + (date.getMonth()+1) : date.getMonth()+1) + '-',
            D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ',
            h = date.getHours()< 10 ? '0' + date.getHours() + ':' : date.getHours() + ':',
            m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':',
            s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds(); 
        return Y + M + D + h + m + s;
      }
    },
    // components:{
    //   headerTop
    // }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../common/stylus/mixin.styl"

</style>
<style lang="scss" scoped>
.wrap {
  position: relative;
}
.content .banner  {
  width: 100%;
  height: 90px;
}
.content .banner img{
  width: 100%;
  height: 100%;
}
.wrapper {
  padding: 12px;
  min-height: calc(100vh - 110px);
  background: #f2f4f6;
}
.wrapper .top {
  display: flex;
  align-items: center;
}
.wrapper .top .t-header {
  width: 40px;
  height: 40px;
}
.wrapper .top .t-header img {
   width: 100%;
  height: 100%;
}
.wrapper .top .t-tabs{
  flex: 1;
  display: flex;
  align-items: center;
  margin-left: 10px;
}
.t-tabs .text {
  color: #6a6a6a;
  padding: 6px 5px;
  border-bottom: 1px solid transparent;
}
.t-tabs .act {
  color: #333;
  border-bottom: 1px solid #333;
}
.s-search {
  width: 90px;
  display: flex;
  align-items: center;
  justify-content: end;
}
.s-search .text {
  margin-left: 5px;
}
.project-list {
  margin-top: 12px;
  position: relative;
}
.project-list .empty{
  // padding-top: 25%;
  color:#9ea6b1;
  font-size: 16px;
  text-align: center;
}
.project-list .empty .text {
  display: flex;
  align-items: center;
  justify-content: center;
}
.project-list .empty .link {
  color: #007aff;
  vertical-align: -2px;
  margin: 0 5px;
}
.user {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-top: 50px;
  .pic {
    width: 50px;
    height: 50px;
  }
  .name {
    margin: 15px 0;
    font-size: 14px;
  }
  .btn {
    border-radius: 5px;
  }
}

.approve-card-container{
	padding: 10px 14px;
	background:rgba(255,255,255,1);
	border-radius:6px;
	margin-bottom: 15px;
	.title{
		margin-bottom: 12px;
    font-size: 15px;
		word-break: break-all;
	}
	.label-text{
		display: flex;
		justify-content: space-between;
		padding: 12px 0;
    font-size: 14px;
		.label{
			font-weight: 400;
			min-width: 100px;
			color:rgba(158,166,177,1);
		}
		
	}
	.create-time{
		font-size: 12px;
		color:rgba(158,166,177,1);
		text-align: right;
	}
}
.status-1{
  color: rgba(158,166,177,1);
 }
 .status-2{
  color: rgba(247,192,24,1);
 }
 .status-3{
  color: rgba(190,13,34,1);
 }
 .status-4{
  color:rgba(19,112,14,1);
 }

</style>